<template>
  <div class="address-manage">
    <!-- 获取微信收货地址 -->
    <wechat-address :id="publicAddressId" :addressList="addressList" @createAddress="createAddress" @chooseAddress="chooseAddress">
    </wechat-address>
    <div class="address-wrapper">
      <div class="address-bar" v-for="(item, index) in addressList" :key="index" @click.stop="chooseAddress(item)">
        <div class="left-info">
          <i class="iconfont icon-duoxuan-xuanzhong1 theme-customize-font" v-if="publicAddressId == item.id"></i>
          <div class="info-text">
            <div class="top-text">
              <div class="name ET2">{{ item.receiver }}</div>
              <div class="phone ET2">{{ formatPhone(item) }}</div>
              <div
                class="tag theme-customize-border theme-customize-font theme-customize-font-black theme-customize-light-new"
                v-if="item.is_default">
                {{ t('default') }}
              </div>
            </div>
            <div class="address-text EC2">
              {{ item.province + item.city + item.county + item.detail }}
            </div>
          </div>
        </div>
        <i class="iconfont icon-icon_edit edit-icon" @click.stop="newAddress(item.id)"></i>
      </div>
    </div>
    <!-- 底部操作按钮 -->
    <div class="finish-btn" >
      <div class="finish-btn-wrapper theme-customize-bg"  @click="newAddress()">
        {{ t('addressSelect_add_address') }}
      </div>
    </div>
  </div>
</template>

<script>
import { getAddressList, createAddress } from '../../fetch-data';
import WechatAddress from "../WechatAddress/index.vue";
import { COMMON_ERROR_MSG } from "../../constants/index";
import locale from '../../../../mixins/locale'

export default {
  name: 'AddressManage',
  mixins: [locale],
  props: {
    addressInfo: {
      typeof: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      addressList: [], // 地址列表
      currentArea: {
        nation_name: "中国",
        nation_code: "86",
      },
    };
  },
  components: {
    WechatAddress
  },
  mounted() {
    this.getAddressList();
  },
  computed: {
    publicAddressId() {
      return this.addressInfo && this.addressInfo.id;
    }
  },
  methods: {
    newAddress(id) {
      this.$emit('newAddress', id);
    },
    // 创建地址
    createAddress(wechatAddress) {
      let that = this;
      let params = {
        receiver: wechatAddress.userName, // 收件人
        phone: wechatAddress.telNumber, // 手机号码
        currentArea: this.currentArea,
        province: wechatAddress.provinceName, // 省
        city: wechatAddress.cityName, // 市
        county: wechatAddress.countryName || wechatAddress.countyName, //区/县
        detail: wechatAddress.detailInfo, // 详细地址
        is_default: 1 // 是否设为默地址,
      };
      createAddress(params).then(res => {
        that.chooseAddress({
          ...params,
          ...res
        });
        that.getAddressList();
      }).catch(err => {
        const { msg } = err || {};
        this.$toast(msg || COMMON_ERROR_MSG);
      })
    },
    // 选择地址
    chooseAddress(address) {
      this.$emit('setAddressInfo', address);
      this.$emit('onClick', false)
    },
    // 获取收货地址列表
    getAddressList() {
      getAddressList().then(res => {
        this.addressList = this.sortChosen(res);
      })
    },
    // 选中的地址置于首位
    sortChosen(arr) {
      let index,
        element,
        newArr = arr;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == this.publicAddressId) {
          element = arr[i];
          index = i;
        }
      }
      if (index && index >= 0) {
        newArr.splice(index, 1);
        newArr.unshift(element);
      }
      return newArr;
    },
    // 格式化电话号码展示
    formatPhone(item) {
      if (item.currentArea && (item.currentArea.nation_code === '86' || item.currentArea.nation_code === '')) {
        return item.phone
      }
      return `${item.currentArea.nation_code}-${item.phone}`
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
@import "../../assets/styles/common.scss";

.address-wrapper {
  overflow: hidden;
  padding-bottom: 1.28rem;

  .address-bar {
    background: white;
    padding: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-bottom: 0.16rem solid #f5f5f5;

    .left-info {
      display: flex;
      align-items: center;

      .icon-duoxuan-xuanzhong {
        font-size: 0.4rem;
        margin-right: 0.32rem;
      }

      .info-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .top-text {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-bottom: 0.16rem;

          .name {
            margin-right: 0.32rem;
            max-width: 3rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
          }

          .tag {
            width: 0.64rem;
            height: 0.32rem;
            text-align: center;
            line-height: 0.32rem;
            background: #dde8fc;
            border-radius: 0.08rem;
            margin-left: 0.32rem;
            font-size: 0.2rem;
            text-size-adjust: none;
          }
        }

        .address-text {
          padding-right: 0.72rem;
        }
      }
    }

    .edit-icon {
      position: absolute;
      right: 0.32rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.4rem;
      color: #c8c8c8;
    }
  }
}

.finish-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 100%;
  padding: 0.16rem 0.28rem;

  .finish-btn-wrapper {
    width: calc(100% - 0.56rem);
    padding: 0.2rem 0;
    border-radius: 0.4rem;
    text-align: center;
    color: #fff;
    background-color: #09bb07;
  }
}
</style>